import "./index.scss";
import { Table, Form, Input, Button, Select } from "antd";
import type { TableProps } from "antd";
import type { FormProps } from "antd";

const data: DataType[] = [
	{
		key: "1",
		type: "vue",
		name: "vue2原理",
	},
	{
		key: "2",
		type: "vue",
		name: "vue3原理",
	},
	{
		key: "3",
		type: "react",
		name: "react原理",
	},
	{
		key: "4",
		type: "next",
		name: "next原理",
	},
];
interface DataType {
	key: string;
	type: string;
	name: string;
}

type FieldType = {
	name?: string;
	type?: string;
};

const columns: TableProps<DataType>["columns"] = [
	{
		title: "序号",
		dataIndex: "key",
		key: "key",
		width: "26%",
	},
	{
		title: "课程类别",
		dataIndex: "type",
		width: "26%",
		key: "type",
	},
	{
		title: "课程名称",
		dataIndex: "name",
		width: "26%",
		key: "name",
	},
	{
		title: "操作",
		key: "action",
		render: () => (
			<div className="btn_wrap">
				<div className="btn">编辑</div>
				<div className="del">删除</div>
			</div>
		),
	},
];
const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
	console.log("Success:", values);
};
const handleChange = (value: string) => {
	console.log(`selected ${value}`);
};
function SubjectManage() {
	return (
		<div className="examHistory_wrap">
			<div className="add">
				<Button type="primary">新增课程</Button>
			</div>
			<Table columns={columns} dataSource={data} />
		</div>
	);
}

export default SubjectManage;
